<template>
  <div class="no-permission-container">
    <el-empty description=" " :image-size="300">
      <template #image>
        <div class="permission-icon">
          <el-icon :size="80" color="#F56C6C"><Lock /></el-icon>
        </div>
      </template>
      <h1 class="title">403 无权限访问</h1>
      <p class="tip">{{ tipMessage }}</p>
      <div class="actions">
        <el-button type="primary" @click="goBack">返回上一页</el-button>
        <el-button @click="goHome">返回首页</el-button>
      </div>
    </el-empty>
  </div>
</template>

<script setup>
import { Lock } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { computed } from 'vue'

const router = useRouter()

const tipMessage = computed(() => {
  return router.currentRoute.value.meta.noPermissionTip ||
      '您没有权限访问该页面，请联系管理员获取权限'
})
const goBack = () => router.go(-1)
const goHome = () => router.push('/')
</script>

<style scoped>
.no-permission-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh;
  text-align: center;
}

.title {
  font-size: 24px;
  color: var(--el-text-color-primary);
  margin-bottom: 16px;
}

.tip {
  font-size: 16px;
  color: var(--el-text-color-secondary);
  margin-bottom: 24px;
}

.actions {
  margin-top: 20px;
}

.permission-icon {
  animation: shake 1.5s infinite;
}

@keyframes shake {
  0%, 100% { transform: rotate(0deg); }
  10%, 30%, 50%, 70%, 90% { transform: rotate(-5deg); }
  20%, 40%, 60%, 80% { transform: rotate(5deg); }
}
</style>
